<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useUserStore } from '@/store/modules/user';
import { ElMessage } from 'element-plus'
import Upload from '@/components/upload/index.vue'
import { fetchGetScoreList, fetchPutActivity } from '@/api/activity'
import { useRoute } from 'vue-router'
import router from '@/router';


const route = useRoute()
let detailData = reactive({
  query: route.query
})


const uploadRef = ref<any>(null)
const uploadRef2 = ref<any>(null)
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  id: null,
  name: '',  // 活动名称
  planNumber: '',  // 活动计划人数
  type: 0,  // 活动类型 
  score: 0, // 活动分数
  form: 1,    // 活动形式，0-线上，1-线下
  address: '',  // 活动地点
  introduce: '', // 活动简介
  // 报名时间
  date1: ref<[Date, Date]>([
    new Date(),
    new Date(),
  ]),
  // 活动时间
  date2: ref<[Date, Date]>([
    new Date(),
    new Date(),
  ]),
  examine: true,  // 互动是否免审批
  imgurl: '', // 活动宣传图
  planBook: '', // 活动宣传图
  person: Number(useUserStore().userInfo.id),
  society: useUserStore().userInfo.society.split('-')[1],
})
let submitLoading = ref(false)

const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  type: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  score: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  form: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  address: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  planNumber: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  introduce: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  date1: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  date2: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  examine: [
    { required: true, message: '请输入', trigger: 'change' },
  ],
  publicizeUrl: [
    { required: true, message: '请选择', trigger: 'blur' },
  ],
  reason: [
    { required: true, message: '请填写', trigger: 'blur' },
  ],
})

// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      uploadRef.value.submitUpload()
      uploadRef2.value.submitUpload()
      setTimeout(() => {
        fetchPutActivity(ruleForm).then((res) => {
          if (Number(res.code) == 200) {
            ElMessage({
              message: '修改成功',
              type: 'success'
            })
            goBack()
          }
        })
      }, 500)
    } else {
      ElMessage({
        type: 'warning',
        message: '请正确填写',
      })
    }
  });
};

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
let scoreList = reactive([
  {
    score: [0, 1, 2]
  }
])
// 获取各类活动的分数
const getScoreList = async () => {
  const res = (await fetchGetScoreList()).data.data
  res.forEach((item) => {
    item.score = item.score.split('-')
  })
  scoreList = res
}
onMounted(() => {
  getScoreList()
  ruleForm.id = detailData.query.id
  ruleForm.name = detailData.query.name
  ruleForm.type = Number(detailData.query.type)
  ruleForm.score = Number(detailData.query.score)
  ruleForm.form = Number(detailData.query.form)
  ruleForm.address = detailData.query.address
  ruleForm.introduce = detailData.query.introduce
  ruleForm.imgurl = detailData.query.imgurl
  ruleForm.planNumber = detailData.query.planNumber
  ruleForm.examine = Boolean(detailData.query.examine)
  ruleForm.examine = Boolean(detailData.query.examine)
  ruleForm.date1 = ([
    new Date(detailData.query.applicationStartTime),
    new Date(detailData.query.applicationEndTime),
  ])
  // 活动时间
  ruleForm.date2 = ([
    new Date(detailData.query.formalStartTime),
    new Date(detailData.query.formalEndTime),
  ])

})
const fileUrl = (value: any) => {
  ruleForm.imgurl = value
}
const fileUrl2 = (value: any) => {
  ruleForm.planBook = value
}
const goBack = () => {
  router.go(-1)
}

</script>
<template>
  <div class="create-society-container">
    <div class="container">
      <div class="container-header-name">修改活动信息</div>

      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" label-position="top"
        class="demo-ruleForm" size="default" status-icon>
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="活动类型" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio :label="0">社团活动</el-radio>
            <el-radio :label="1">院级活动</el-radio>
            <el-radio :label="2">校级活动</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动二课分" prop="score">
          <el-radio-group v-model="ruleForm.score">
            <el-radio :label="Number(item)" v-for="(item, index) in scoreList[ruleForm.type].score" :key="index">{{
              Number(item).toFixed(1) }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="form">
          <el-radio-group v-model="ruleForm.form">
            <el-radio :label="1">线下</el-radio>
            <el-radio :label="0">线上</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动地点" prop="address">
          <el-input v-model="ruleForm.address" />
        </el-form-item>
        <el-form-item label="活动人数" prop="planNumber">
          <el-input v-model="ruleForm.planNumber" />
        </el-form-item>
        <el-form-item label="活动简介" prop="introduce">
          <el-input v-model="ruleForm.introduce" :rows="5" type="textarea" />
        </el-form-item>
        <el-form-item label="报名时间" prop="date1">
          <div>
            <el-date-picker v-model="ruleForm.date1" type="datetimerange" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" />
          </div>
        </el-form-item>
        <el-form-item label="活动时间" prop="date2">
          <div>
            <el-date-picker v-model="ruleForm.date2" type="datetimerange" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" />
          </div>
        </el-form-item>
        <el-form-item label="活动是否免审批" prop="examine">
          <el-checkbox v-model="ruleForm.examine" label="活动免审批" size="large" />
        </el-form-item>
        <el-form-item label="活动宣传图" class="el-form-item-full">
          <div class="demo-image__preview">
            <el-image style="height: 150px" :src="ruleForm.imgurl" :zoom-rate="1.2" :preview-src-list="[ruleForm.imgurl]"
              fit="cover" />
          </div>
        </el-form-item>
        <el-form-item label="新活动宣传图" class="el-form-item-full">
          <Upload type="img" ref="uploadRef" @fileUrl="fileUrl" />
        </el-form-item>
        <el-form-item label="新活动策划书">
          <Upload type="file" ref="uploadRef2" @fileUrl="fileUrl2" />
        </el-form-item>
        <el-form-item>
          <el-button @click="goBack" size="large" class="btn-white">返回</el-button>
          <el-button type="primary" size="large" @click="submitForm(ruleFormRef)" class="btn-green"
            :loading="submitLoading">
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.create-society-container {
  display: flex;
  justify-content: center;

  .container {
    width: 50%;

    .container-header-name {
      background: $green;
      height: 6rem;
      line-height: 6rem;
      font-size: 2rem;
      font-weight: 700;
      color: #fff;
      padding: 0 2rem;
    }

    .header-disabled {
      background: #999;
    }

    .demo-ruleForm {
      border: 0.5rem solid $green;
      border-top: none;
      padding: 2rem;

      .el-form-item__content {
        display: grid !important;
      }
    }

    .form-disabled {
      border-color: #999;
    }

    .el-form-item {
      margin-bottom: 2rem;
    }
  }

  .el-radio {
    margin-right: 4rem;
  }
}
</style>

